<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="query.functionName" placeholder="功能名称" style="margin-right:10px;width:220px" class="filter-item" />
      <el-input v-model="query.settingCheckIdatus" placeholder="审批流程名称" style="margin-right:10px;width:220px" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getSysfunction">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleAdd('新增审评')">
        {{ $t('table.NewFunction') }}
      </el-button>

    </div>

    <el-table :data="functionList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100% margin-bottom: 20px" row-key="id"
    v-loadig="loading" highlight-current-row border>
      <el-table-column prop="functionName" label="功能名称" />
      <el-table-column prop="createUserName" label="创建人"> </el-table-column>
      <el-table-column prop="functionMenu" label="功能Menu"> </el-table-column>
      <el-table-column prop="checkName" label="审批名称" />
      <el-table-column prop="functionType" label="审批类型" />
      <el-table-column label="创建时间">
        <template slot-scope="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('table.actions')" align="center" min-width="190px">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" size="mini" @click="handleUpdate(row, $index)">
            {{ $t('table.edit') }}
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row, $index)">
            {{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top:20px;" :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="functionList.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" :title="dialogType === 'edit' ? '编辑' : text" width="60%">
      <el-form ref="ruleForm" :rules="rules" :model="project" label-width="150px" label-position="left">
        <el-form-item label="审批名称" prop="functionName">
          <el-input style="margin-left: 0;" v-model.trim="project.functionName" placeholder="请输入功能名称" maxlength="20" />
        </el-form-item>
        <el-form-item label="功能Menu" prop="functionMenu">
          <el-input style="margin-left: 0;" v-model.trim="project.functionMenu" placeholder="请输入功能Menu" />
        </el-form-item>
        <el-form-item label="审批流程" prop="settingCheckId">
          <el-select v-model.trim="project.settingCheckId" clearable style="margin-right:10px;" placeholder="请选择审批流程" class="filter-item" filterable>
            <el-option v-for="item in shenPiList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批类型" prop="functionType">
          <el-input style="margin-left: 0;"    maxlength="2" v-model.trim="project.functionType" placeholder="请输入功能类型" onkeyup="this.value=this.value.replace(/\D|^0/g,'')"/>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="canclebtn('canclebtn')">
          {{ $t('permission.close') }}
        </el-button>
        </el-button>
        <el-button type="primary" @click="confirm(1)">
          {{ $t('permission.save') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import groupId from '../../../configData/configGroupId'
import { getAllInfo as getSupplierAll } from '@/api/supplier'
import { addSysfunction, getPage, addApprovalProcess, getSysfunction, del } from '@/api/approvalProcessSettings'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { deepClone, arraryRemove } from '@/utils'

const project = {
  functionName: "",
  functionMenu: '',
  settingCheckId: '',
  functionType:''

}



export default {
  name: 'Project',
  components: { Pagination },
  directives: { waves },
  data() {
    return {

      listResult: [],




      currentPage: 1,
      pagesize: 10,


      rules: {
        functionType: [
          { required: true, message: '请填写审批类型', trigger: 'blur' },
        ],
        functionName: [
          { required: true, message: '请填写功能名称', trigger: 'blur' },
        ],
        settingCheckId: [
          { required: true, message: '请选择审批流程', trigger: 'blur' },
        ],


        functionMenu: [
          { required: true, message: '请填写功能Menu', trigger: 'blur' },
        ],

      },
      dialogVisible: false,
      dialogType: 'new',
      total: 0,
      project: Object.assign({}, project),

      query: {

        pageIndex: 1,
        pageSize: 0,

      },
      queryShenPi: {

        pageIndex: 1,
        pageSize: 0,

      },


loading:false,

      functionList: [],
      tableData5: [],
      shenPiList: [],








    }
  },

  created() {
    this.getSysfunction()




  },
  mounted() {



  },
  destroyed() {

  },
  methods: {
    getShenPi() {
      getPage(this.queryShenPi).then((res) => {
        this.shenPiList = res.data.items


      })
    },
    handleDelete(row) {

      this.$confirm('确认删除用户?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        del(row.id).then((res) => {
          console.log(res)
          this.$message.success('删除成功!')
          this.getSysfunction()
        })
      }).catch(err => console.error(err))
    },
    getSysfunction() {
      this.currentPage = 1
      this.loading=true
      getSysfunction(this.query).then((res) => {
        console.log(res)
         this.loading=false
        this.functionList = res.data.items
      }).catch(()=>{
        this.loading=false
      })
    },


    handleSizeChange: function(size) {
      this.pagesize = size
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    canclebtn: function(ruleForm) {
      this.dialogVisible = false

    },

    search() {
      this.query.pageIndex = 1

    },

    handleAdd(text) {
      this.dialogVisible = true
      this.show = false
      this.text = text
      this.project = Object.assign({}, project)

      this.dialogType = 'new'
      this.getShenPi()

    },
    handleUpdate(row, $index) {
      this.getShenPi()
      this.dialogType = 'edit'
      console.log(row)
      this.text = '编辑'
      this.dialogVisible = true
      this.project = deepClone(row)
    },

    async confirm(type) {
      let obj = this.project
      console.log(obj)
      const isEdit = this.dialogType === 'edit'
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {

          addSysfunction(obj).then(res => {
            if (res.isSuccess) {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.getSysfunction()
              this.dialogVisible = false
            }else{
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }
      })
    },








  }
}
</script>
<style scoped>
.item {
  padding-top: 10px;
  /*background:#f8f8f8;*/
  margin-top: 50px;
  border-radius: 10px;
}

.outinner {
  display: flex;
  align-items: flex-end;
}

.out {

  margin-top: 20px;
  width: 100%;
  bottom: 20px;
}

.itemInner {

  /*border-bottom:1px solid #ddd;*/
  padding: 20px;
}

.name {
  margin-bottom: 10px;
  color: #9999
}

.time {
  color: #9999
}

.txt {
  width: 90%;
}

input {
  margin: 0;
}

.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
  display: none;
}

.ban {
  text-align: left;
  font-weight: bold;
  font-size: 20px;
  background: #7ba4e17a;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
}
</style>


